<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model"  slot="detail">
        <a-row>
          <a-col :span="6" >
            <a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime">
              <a-date-picker
                mode="year"
                v-model="model.startTime"
                :open="startDateOpen"
                format="YYYY"
                :allowClear="false"
                :disabled-date="disabledStartDate"
                @openChange="openChangeStartDate"
                @panelChange="panelStartChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
              <a-date-picker
                mode="year"
                v-model="model.endTime"
                :open="endDateOpen"
                :disabled-date="disabledEndDate"
                format="YYYY"
                :allowClear="false"
                @openChange="openChangeEndDate"
                @panelChange="panelEndChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="级别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classes">
              <j-dict-select-tag type="list" v-model="model.classes" dictCode="CIAP_CLASSESS" placeholder="请选择级别" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="课程名称" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="courseName">
              <a-input v-model="model.courseName" placeholder="请输入课程名称" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="备注" :labelCol="{ span: 2 }" :wrapperCol="{ span: 22 }" prop="remark">
              <a-input v-model="model.remark" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="成员列表" :key="refKeys[0]" :forceRender="true">
        <member-list v-model="memberListTable.dataSource"></member-list>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

  import { getAction } from '@/api/manage'
  import { FormTypes,getRefPromise,VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
  import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import moment from 'moment'
  import MemberList from '@views/gfxy/common/memberList'

  export default {
    name: 'CourseOfIdeologicalAndPoliticalForm',
    mixins: [JEditableTableModelMixin],
    components: {
      MemberList
    },
    data() {
      return {
        startDateOpen:false,
        endDateOpen:false,

        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol1: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol1: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        model:{
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,

        refKeys: ['memberList', ],
        tableKeys:['memberList', ],
        activeKey: 'memberList',
        // 成员列表
        memberListTable: {
          loading: false,
          dataSource: [],
        },
        url: {
          add: "/teaching/courseOfIdeologicalAndPolitical/add",
          edit: "/teaching/courseOfIdeologicalAndPolitical/edit",
          queryById: "/teaching/courseOfIdeologicalAndPolitical/queryById",
          memberList: {
            list: '/teaching/innovationAndEntrepreneurship/queryMemberListByMainId',
          },
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      projectType:{
        type: Number,
        required: true,
      },
      date:{
        type: String,
        required: true,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    },
    methods: {
      moment,


      openChangeStartDate(status){
        if (status) {
          this.startDateOpen = true;
        } else {
          this.startDateOpen = false;
        }
      },
      openChangeEndDate(status){
        if (status) {
          this.endDateOpen = true;
        } else {
          this.endDateOpen = false;
        }
      },
      disabledStartDate(startValue){
        //startValue moment
        const _startValue = startValue.format('YYYY');
        const _endValue = this.model.endTime;
        if (!startValue || !_endValue || _endValue == '') {
          return false;
        }
        return _startValue > _endValue;
      },
      disabledEndDate(endValue){
        const _startValue = this.model.startTime;
        const _endValue = endValue.format('YYYY');
        if (!endValue || !_startValue || _startValue == '') {
          return false;
        }
        return _startValue > _endValue;
      },

      // 选择年之后 关闭弹框
      panelStartChange: function(value){
        // const endOfYear = moment().endOf('year')
        this.model.startTime = value.format('YYYY');
        this.startDateOpen = false;
      },
      // 选择年之后 关闭弹框
      panelEndChange: function(value){
        this.model.endTime = value.format('YYYY');
        this.endDateOpen = false;

      },


      onChange(dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      },

      handleChange(value) {
        console.log(value)
        this.value = value;
      },
      handlePanelChange(value, mode) {
        this.value = value;
        this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
      },
      addBefore(){
        this.memberListTable.dataSource=[]
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.memberList.list, params, this.memberListTable)
        }
      },
      showData(){
        console.log(this.memberListTable.dataSource)
      },
      handleOk(){

        let formData = this.classifyIntoFormData()
        // 发起请求
        return this.request(formData)
      },
      // //校验所有一对一子表表单
      // validateSubForm(allValues){
      //     return new Promise((resolve,reject)=>{
      //       Promise.all([
      //       ]).then(() => {
      //         resolve(allValues)
      //       }).catch(e => {
      //         if (e.error === VALIDATE_NO_PASSED) {
      //           // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
      //           this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
      //         } else {
      //           console.error(e)
      //         }
      //       })
      //     })
      // },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        // let main = Object.assign(this.model, allValues.formValue)
        return {
          ...this.model, // 展开
          memberListList: this.memberListTable.dataSource,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
    }
  }
</script>

<style scoped>

</style>